// 导入模块
const path = require('path'); // 导入 Node.js 的 path 模块，用于处理文件路径
const CracoAlias = require('craco-alias'); // 导入 CracoAlias 插件，用于设置路径别名
const ESLintPlugin = require('eslint-webpack-plugin'); // 导入 ESLintPlugin 插件，用于 ESLint 集成

// 定义配置对象
module.exports = { // 定义 craco 配置对象
  plugins: [ // 配置使用的插件列表
    {
      plugin: CracoAlias, // 使用 CracoAlias 插件
      options: { // CracoAlias 插件的配置选项
        source: 'tsconfig', // 指定路径别名的来源为 tsconfig.json 文件
        baseUrl: '.', // 指定 tsconfig.json 文件中的 baseUrl 配置，默认为当前目录
        tsConfigPath: './tsconfig.paths.json' // 指定包含路径别名的 tsconfig.json 文件路径
      }
    },
    {
      plugin: ESLintPlugin, // 使用 ESLintPlugin 插件
      options: { // ESLintPlugin 插件的配置选项
        extensions: ['js', 'jsx'], // 指定需要进行 ESLint 检查的文件扩展名
        exclude: ['node_modules'], // 排除不需要检查的文件夹，例如 node_modules
        cache: true, // 启用缓存功能，提高构建速度
        cacheLocation: path.resolve(__dirname, '.eslintcache/.eslintcache'), // 指定缓存文件的存储位置
      }
    }
  ],
  webpack: { // Webpack 相关的配置
    alias: { // 配置路径别名
      '@pages': path.resolve(__dirname, 'src/pages'), // 设置 @pages 别名指向 src/pages 目录
      '@src': path.resolve(__dirname, 'src'), // 设置 @src 别名指向 src 目录
      '@store': path.resolve(__dirname, 'src/store'), // 设置 @store 别名指向 src/store 目录
      '@utils': path.resolve(__dirname, 'src/utils'), // 设置 @utils 别名指向 src/utils 目录
      '@Api': path.resolve(__dirname, 'src/Api'), // 设置 @Api 别名指向 src/Api 目录
      '@Mock': path.resolve(__dirname, 'src/Mock'), // 设置 @Mock 别名指向 src/Mock 目录
      '@Img': path.resolve(__dirname, 'src/assets/img'), // 设置 @Img 别名指向 src/assets/img 目录
      '@Scss': path.resolve(__dirname, 'src/assets/Scss'), // 设置 @Scss 别名指向 src/assets/Scss 目录
      '@Components': path.resolve(__dirname, 'src/components') // 设置 @Components 别名指向 src/components 目录
    }
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i, // 匹配 .scss 文件
        use: [
          'style-loader', // 将 CSS 添加到 DOM 中
          'css-loader', // 解析 @import 和 url() 这样的 CSS 语法
          'postcss-loader', // 处理 CSS 并添加浏览器前缀
          'resolve-url-loader', // 解析 CSS 中的 URL 路径
          {
            loader: 'sass-loader', // 编译 SCSS 文件
            options: {
              implementation: require('sass'), // 使用 dart-sass 实现
              sassOptions: {
                fiber: false, // 设置为 false 以避免警告
                // 其他选项
              },
            },
          },
        ],
      },
      // 其他规则
    ],
  },
  style: { // 样式相关配置
    sass: { // Sass 相关配置
      implementation: require('sass'), // 使用 dart-sass 实现
      sassOptions: { // Sass 的其他配置选项
        fiber: false // 设置为 false 以避免警告
      }
    }
  }
};